<template>
  <div class="footer">
    <ul>
      <li v-for="tab in FooterData" :key="tab.id" @click="FooterUlliData(tab.id)" ref="footerulli">
        <i :class="tab.ionClass"></i>
        <span>{{tab.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      FooterData: [
        {
          id: "0",
          name: "首页",
          Url: "/",
          ionClass: "iconfont icon-index"
        },
        {
          id: "1",
          name: "代办",
          ionClass: "iconfont icon-faxian3",
          Url: "/Find"
        },
        {
          id: "2",
          name: "消息",
          ionClass: "iconfont icon-xiaoxi-2",
          Url: "/News"
        },
        {
          id: "3",
          name: "我的",
          ionClass: "iconfont icon-wodedangxuan",
          Url: "/Personainformation"
        }
      ]
    };
  },
  mounted() {
    if (this.$store.state.footercolor == "") {
      this.FooterUlliData("0");
    } else {
      this.FooterUlliData(this.$store.state.footercolor);
    }
  },
  watch: {},
  methods: {
    FooterUlliData(val) {
      this.$store.state.footercolor = val;
      var LiData = this.$refs["footerulli"];
      for (var LiDataIndex in LiData) {
        LiData[LiDataIndex].classList.remove("color");
      }
      LiData[val].classList.add("color");
      var NameIndex = this.FooterData[val].Url;
      this.$router.push(NameIndex);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.footer ul {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
.footer ul li {
  width: 25%;
  float: left;
  font-size: 0.22rem;
  color: rgba(0, 0, 0, 0.521);
  background: rgba(231, 203, 203, 0.082);
  height: 1rem;
}
.footer .color {
  /* color: rgb(26, 188, 156); */
  color: #409eff;
}
.footer ul li span {
  display: inline-block;
  margin-top: 0.05rem;
}
.footer i {
  display: block;
  font-size: 0.42rem;
}
</style>
